import React from 'react';
import {FlatList, Image, ListRenderItemInfo, StyleSheet} from 'react-native';
import {View, Text} from 'react-native';
import Icon from '@/assets/iconfont/index';
import {getTimeString, viewportWidth} from '@/utils/index';
import Touchable from '@/components/Touchable';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '../../models';
import {SoundsHistory} from '@/models/soundHistory';

const mapStateToProps = ({soundsHistory}: RootState) => {
  return {
    soundsHistory: soundsHistory.soundsHistory,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {}

const Listen: React.FC<IProps> = props => {
  const {soundsHistory, dispatch} = props;

  const onDelete = (item: SoundsHistory) => {
    dispatch({
      type: 'soundsHistory/delete',
      payload: {
        data: item,
      },
    });
  };

  const renderItem = ({item}: ListRenderItemInfo<SoundsHistory>) => {
    return (
      <View style={styles.item}>
        <Image source={{uri: item.thumbnailUrl}} style={styles.image} />
        <View style={styles.content}>
          <Text style={styles.title}>{item.title}</Text>
          <View style={styles.bottom}>
            <Icon name="icon-time" color="#999" size={14} />
            <Text style={styles.text}>{getTimeString(item.duration)}</Text>
            <Text style={styles.rate}>已播：{item.rate}%</Text>
          </View>
        </View>
        <Touchable
          style={styles.deleteBtn}
          onPress={() => {
            onDelete(item);
          }}>
          {/* <Icon name="icon-" /> */}
          <Text>删除</Text>
        </Touchable>
      </View>
    );
  };
  if (soundsHistory.length < 1) {
    return (
      <View style={styles.emptyView}>
        <Text style={styles.emptyText}>
          暂时没有你听过的数据哦 快点去听听吧
        </Text>
      </View>
    );
  }
  return <FlatList data={soundsHistory} renderItem={renderItem} />;
};

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    marginHorizontal: 10,
    borderBottomColor: '#ccc',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  image: {
    width: 65,
    height: 65,
    borderRadius: 3,
    margin: 5,
  },
  title: {
    color: '#999',
  },
  content: {
    justifyContent: 'space-around',
    flex: 1,
  },
  bottom: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  text: {
    color: '#999',
    marginLeft: 5,
  },
  rate: {
    marginLeft: 20,
    color: '#f6a624',
  },
  deleteBtn: {
    padding: 10,
    justifyContent: 'center',
  },
  emptyView: {
    width: viewportWidth,
    paddingHorizontal: viewportWidth / 4,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyText: {
    fontSize: 18,
    color: '#999',
    textAlign: 'center',
  },
});

export default connector(Listen);
